<!-- 折线图 -->
<template>
  <div class="class_default" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '@/views/dashboard/mixins/resize'

  export default {
    name: "lineChart",
    mixins: [resize],
    props: {
      chartData: {
        type: Object,
        default() {
          return {
            title: '',  // 图表标题
            xName: [],  // X轴每一个点的名称
            xLabel: '', // X轴名称
            xData: [],  // X轴数据
            yLabel: ''  // Y轴名称
          }
        }
      }
    },
    data() {
      return {
        chart: null,
        series: []
      }
    },
    mounted() {
      // 先处理数据
      this.initData();
      // 创建图表
      this.chart = echarts.init(this.$el, 'macarons')
      this.$nextTick(() => {
        // 加载图表数据
        this.setChartData()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    // 监听到图表数据变化，处理数据并重新渲染图表
    watch: {
      chartData: {
        handler(chartData) {
          this.chartData = chartData
          this.initData()
          this.$nextTick(() => {
            this.setChartData()
          })
        },
        // immediate: true,
        deep: true  // 针对于对象，深度监听
      }
    },
    methods: {
      // 初始化图表的数据
      initData() {
        this.series = []
        this.chartData.xData.forEach(el => {
          let serie = {
            name: el.name,
            type: 'line',
            smooth: 0,
            symbolSize: 5,
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label : {
                  show: true
                }
              }
            },
            data: el.data,
            animationDuration: 2800
          }
          this.series.push(serie);
        });
      },
      // 加载图表数据
      setChartData() {
        this.chart.setOption({
          //【title组件】：图表标题
          title: {
            text: this.chartData.title,
            x: 'left',
            y: 'top',
            textStyle: {
              fontSize: 18,
              fontWeight: 'bolder',
              color: '#333'  // 主标题文字颜色
            },
          },
          //【legend组件】：图例
          legend: {
            itemGap: 15
          },
          //【tooltip组件】：提示框
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          //【grid组件】：直角坐标系的底板
          grid: {
            top: '25%',
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          //【xAxis组件】：直角坐标系X轴
          xAxis: [{
            name: this.chartData.xLabel,
            data: this.chartData.xName,
            boundaryGap: false,
            axisTick: {
              show: false
            }
          }],
          //【yAxis组件】：直角坐标系Y轴
          yAxis: [{
            type: 'value',
            name: this.chartData.yLabel,
            axisTick: {
              show: false
            }
          }],
          // series(系列)
          //   name：
          //   type：图表类型：line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)、...
          //   symbol：设置小圆点消失，取值('none', 'circle')
          //   smooth：设置折线弧度，取值：0-1之间
          //   symbolSize：设置折线上圆点大小
          //   data：数据
          series: this.series
        })
      }
    }
  }
</script>

<style scoped>
  .class_default {
    width: 100%;
    height: 300px;
  }
</style>
